<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宏运商城系统管理端</title>
    <style>
        #app {
            position: absolute;
            width: 500px;
            height: 450px;
            left: 50%;
            margin-left: -250px;
            margin-top: 100px;
            padding: 50px;
        }
        body {
            background-image: url('image/background1.jpeg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .el-row {
            text-align: center;
        }
        .el-form-item label {
            color: black;
        }
        .el-form-item .el-input__inner {
            color: black;
        }
    </style>

</head>
<body>
<div id="app">
    <h1 style="text-align: center;margin-bottom: 50px;">宏运商城系统<br>管理端</h1>
    <el-form :model="manager" :rules="rules" ref="manager" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号：" prop="managerAcc">
            <el-input v-model="manager.managerAcc"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="managerPwd">
            <el-input v-model="manager.managerPwd"></el-input>
        </el-form-item>
        <el-form-item label="验证码：" prop="code">
            <el-col :span="12">
                <el-input v-model="manager.code"></el-input>
            </el-col>
            <el-col :span="10">
                <img :src="codeUrl" alt="验证码" @click="refreshCodeIng" style="width: 100px; height: 40px; margin-left: 10px; cursor: pointer;">
            </el-col>
        </el-form-item>
        <el-row align="center">
            <el-button type="primary" style="width: 100px;" @click="login">登入</el-button>
            <el-button type="primary" style="width: 100px;" @click="register">注册</el-button>
        </el-row>
    </el-form>
</div>
</body>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                manager: {
                    managerAcc: '',
                    managerPwd: '',
                    code: ''
                },
                codeUrl: "/code",
                rules: {
                    managerAcc: [
                        { required: true, message: '请输入账号', trigger: 'blur' }
                    ],
                    managerPwd: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    code: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            refreshCodeIng() {
                this.codeUrl = `/code?t=${new Date().getTime()}`;
                console.log(codeUrl)
            },
            register() {
                window.location.href = "/register.html";
            },
            login() {
                axios({
                    method: 'post',
                    url: '/manager/login',
                    data: this.manager
                })
                    .then(resp => {
                        if (resp.data.data === 1) {
                            this.$message({
                                type: 'success',
                                message: '登录成功!'
                            });
                            setTimeout(() => {
                                window.location.href = "/index.html";
                            }, 1000);
                        } else {
                            this.$message({
                                type: 'error',
                                message: resp.data.msg || '登录失败，请检查账号和密码'
                            });
                        }
                    })
                    .catch(error => {
                        this.$message({
                            type: 'error',
                            message: '登录请求发生错误，请稍后重试。'
                        });
                        console.error(error);
                    });
            }
        }
    });
</script>
</html>